<template>
  <div class="index" v-loading.fullscreen.lock="fullscreenLoading">
    <div
      style="
        background: #fff;
        border-bottom: 1px solid #f7f8fa;
        padding: 0px 48px;
      "
    >
      <el-breadcrumb separator="/" style="height: 48px; line-height: 48px">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>整旅</el-breadcrumb-item>
        <el-breadcrumb-item>训练水平智能分析</el-breadcrumb-item>
        <el-breadcrumb-item>
          <span v-if="activeName == 1">训练水平评定</span>
          <span v-if="activeName == 2">大项演练分析</span>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="headerBox">
      <div class="headerTit" v-if="isdetails == false && ischengji == false">
        常规导弹旅军事训练水平综合评定——（待战戒备状态）
      </div>
      <div v-if="isdetails == false && ischengji == false">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="训练水平评定" name="1"></el-tab-pane>
          <el-tab-pane label="大项演练分析" name="2"></el-tab-pane>
        </el-tabs>
      </div>
      <div v-if="isdetails == true || ischengji == true">
        <div style="width: 800px" v-if="isdetails == true">
          <el-tabs v-model="istype" @tab-click="istypeClick">
            <el-tab-pane label="评定详情" name="1"></el-tab-pane>
            <el-tab-pane label="评定详情分析" name="2"></el-tab-pane>
          </el-tabs>
        </div>
        <div style="width: 800px" v-if="ischengji == true">
          <el-tabs v-model="chengjidetails">
            <el-tab-pane label="成绩详情" name="1"></el-tab-pane>
          </el-tabs>
        </div>
        <span
          class="xiqngqing"
          @click="backClick"
          style="float: right; margin-top: -36px"
          >返回上一页</span
        >
      </div>
    </div>
    <div v-if="activeName == 1 && isdetails == false && ischengji == false">
      <Xunlian
        @detailsWatch="detailsWatch"
        :isdetails="isdetails"
        ref="xunlian"
      />
    </div>
    <div v-if="activeName == 2 && isdetails == false && ischengji == false">
      <Jieduan
        @chengjiWatch="chengjiWatch"
        :ischengji="ischengji"
        ref="jieduan"
      />
    </div>
    <div v-if="isdetails == true && istype == 1">
      <Pingding ref="pingding" />
    </div>
    <div v-if="isdetails == true && istype == 2">
      <Fenxi ref="fenxi" />
    </div>
    <div v-if="ischengji == true">
      <Chengji ref="chengji" />
    </div>
  </div>
</template>

<script>
import Xunlian from "./xunlian.vue";
import Jieduan from "./jieduan.vue";
import Pingding from "./pingding.vue";
import Chengji from "./chengji.vue";
import Fenxi from "./fenxi.vue";
export default {
  name: "indexbox",
  data() {
    return {
      fullscreenLoading: false,
      activeName: "1",
      isdetails: false,
      istype: "1",
      ischengji: false,
      chengjidetails: "1",
    };
  },
  components: {
    Xunlian,
    Jieduan,
    Pingding,
    Chengji,
    Fenxi
  },
  updataed() {},
  mounted() {
    let loginType = sessionStorage.getItem("loginType");
    if (loginType == "true") {
      this.$nextTick(() => {
        this.$refs.xunlian.yibiaopan();
        this.$refs.xunlian.qushi();
        this.$refs.xunlian.kfgjyinziData();
        this.$refs.xunlian.merage();
      });
      // this.$refs.jieduan.tujiyanlian();
      this.tableWidth = document.body.clientWidth;
      window.onresize = () => {
        return () => {
          this.tableWidth = document.body.clientWidth;
        };
      };
    } else {
      this.fullscreenLoading = true;
      setTimeout(() => {
        this.fullscreenLoading = false;
        this.$notify({
          title: "警告",
          message: "请你先登录",
          type: "warning",
        });
      }, 500);
      setTimeout(() => {
        this.$router.push("/login");
      }, 500);
    }
  },
  methods: {
    backClick() {
      this.isdetails = false;
      this.ischengji = false;
      if (this.activeName == 1) {
        this.$nextTick(() => {
          this.$refs.xunlian.yibiaopan();
          this.$refs.xunlian.qushi();
          this.$refs.xunlian.kfgjyinziData();
          this.$refs.xunlian.merage();
          // this.$refs.xunlian.leida();
          // this.$refs.xunlian.zbqushi();
        });
      } else {
        this.$nextTick(() => {
          this.$refs.jieduan.tujiyanlian();
          this.$refs.jieduan.jdchengji();
          this.$refs.jieduan.jdkoufen();
          this.$refs.jieduan.jdsangji();
          this.$refs.jieduan.merage();
        });
      }
    },
    chengjiWatch() {
      this.isdetails = false;
      this.ischengji = true;
      this.istype = "1";
      this.chengjidetails = "1";
      this.$nextTick(() => {
        this.$refs.chengji.sangji();
      });
    },
    detailsWatch() {
      this.ischengji = false;
      this.isdetails = true;
      this.istype = "1";
      this.chengjidetails = "1";
      this.$nextTick(() => {
        this.$refs.pingding.sangji();
      });
    },
    istypeClick() {
      if (this.istype == 1) {
        this.$nextTick(() => {
          this.$refs.pingding.sangji();
        });
      } else {
        this.$nextTick(() => {
          this.$refs.fenxi.leida();
          this.$refs.fenxi.qiangxiang();
          this.$refs.fenxi.ruoxiang()
          this.$refs.fenxi.zbqushi();
        });
      }
    },
    handleClick(tab, event) {
      if (this.activeName == 1) {
        this.$nextTick(() => {
          this.$refs.xunlian.yibiaopan();
          this.$refs.xunlian.qushi();
          this.$refs.xunlian.kfgjyinziData();
          this.$refs.xunlian.merage();
          // this.$refs.xunlian.leida();
          // this.$refs.xunlian.zbqushi();
        });
      } else {
        this.$nextTick(() => {
          this.$refs.jieduan.tujiyanlian();
          this.$refs.jieduan.jdchengji();
          this.$refs.jieduan.jdkoufen();
          this.$refs.jieduan.jdsangji();
          this.$refs.jieduan.merage();
        });
      }
    },
    a() {
      // 数据请求
      // this.$http.article
      //   .login({
      //     account: "admin",
      //     password: "admin",
      //   })
      //   .then((res) => {
      //     console.log("aa打印的数据", res);
      //     // 执行某些操作
      //   });
    },
  },
};
</script>

<style scoped>
@import "./css/index.css";
</style>

